<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		div{
			position: absolute;
			width:79px;
			height:108px;
			background: url(images/girl.png) 0px -216px;
			top:0;
			left:0;
		}
	</style>
</head>
<body>
	<button id="btn">dsfsf</button>
	<script>
		function Girl(){
			this.x=0;
			this.state =0;
			this.dom = document.createElement('div') ;
			this.isMove = true;
			var self = this;
			document.body.appendChild(this.dom)
			this.dom.onclick=function(){
				if(self.isMove){
					clearInterval(self.timer)
					self.isMove = false;
				}else{
					self.move()
					self.isMove = true;
				}
				
			}
			
			this.move();
		}
		Girl.prototype.move = function(){
			var self = this;
			this.timer=setInterval(function(){
				self.x+=10;
				self.state++;
				if(self.state >7){
					self.state =0;
				}
				self.dom.style.backgroundPosition = -79 * self.state + "px -216px"
				self.dom.style.left = self.x +"px";
			},200)
		}
		var btn = document.getElementById("btn")
		btn.onclick = function(){
			new Girl();
		}
		
	</script>
</body>
</html>